<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
/* 大的table */
table{margin: 10px auto; width: 80%; border: 1px solid #69c;border-collapse: collapse ;
}
/* td table 是后面的样式 */
table tr td,table tr th{height: 30px;border: 1px solid #69c;text-align: center;font-size: 12px;
}
.yellow{background:yellow ;}
.childdiv{height: 30px;line-height: 30px;}

</style>
<div id="app">
<table>
<tr>
<th><childtd >序号</childtd></th>
<th><childtd >名字</childtd></th>
<th><childtd >价格</childtd></td></th>


<tr>
<td><childtd >
<template>
	<button>{{add}}</button>
	<span>1</span>
	<button>{{del}}</button>
</template>
</childtd></td>

<td><childtd >测试4</childtd></td>
<td><childtd >40</childtd></td>
</tr>

<!-- <tr>
//下面分开
<td><childtd >
<template>
	<button>{{add}}</button>
	<span>1</span>
	<button>{{del}}</button>
</template>
</childtd></td>
//上面分开
<td><childtd >测试4</childtd></td>
<td><childtd >40</childtd></td>
</tr> -->

<tr>
</childtd></td>
<td><childtd >
<template>
	<button>{{add}}</button>
	<span>1</span>
	<button>{{del}}</button>
</template>
</childtd></td>

<td><childtd >测试4</childtd></td>
<td><childtd >40</childtd></td>
</tr>




<tr>
<td><childtd >1</childtd></td>
<td><childtd >测试4</childtd></td>
<td><childtd >40</childtd></td>
</tr>




<tr>
	<td><childtd>
	<template #childtd1="a">
		<button>{{a.add}}</button>
		<span>1</span>
		<button>{{a.del}}</button>
	</template>
	</childtd></td>
	
	<td><childtd>测试4</childtd></td>
	<td><childtd>40</childtd></td>
	</tr>

</table>

</div>

</head>
<body>
<script>

//组件
Vue.component('childtd',{
	props:["name"],
	template:"<div v-bind:class='classObj' @mouseover='change()' @mouseout='change()'><slot></slot><slot name='childtd1' :add='childadd' :del='childdel'></slot></div>",
	//template1:"<div><slot name="child2" :value="childadd" :value1="childdel"></slot></div>",
	data:function(){
		return{
			childadd:"加",
			childdel:"减",
			choose:false
		}
	},
	computed:{
		classObj:function(){
			return{
				yellow:this.choose,
				childdiv:true
			}
		}
	},
	methods:{
		change:function(){
			this.choose=!this.choose
		}
	}
})
new Vue({
	el:"#app",
	data:{
		add:"+",
		del:"-",
		choose:false,
	},
	methods:{
		change:function(){
			this.choose=!this.choose
		}
	}
})
</script>
</body>
</html>
